<template>
	<view style="overflow-y:auto;">
		<u-swiper name='image' border-radius='1' :duration='duration' :interval='interval' :height="height"
			:list="swipperList">
		</u-swiper>
		<view class="tab-stricky">
			<view class="down_box">
				<div class="box1"></div>
				<div class="box2"></div>
				<div class="box3"></div>
			</view>
		</view>
		<view class="background">
			<div class="up">
				<view class="price">
					￥{{Price}}
				</view>
<!-- 				<view class="looks">
					浏览:{{looks}},想要:{{ask}}
				</view> -->
			</div>
			<view class="info">
				<view class="introduce">
					{{introduce}}
				</view>
			</view>
		</view>
		<view class="navigation">
			<view class="left">
				<view class="item" @click="collectBtn">
					<u-icon v-if="collectStatus == '0'" :size="40" name="star"></u-icon>
					<u-icon v-if="collectStatus == '1'" color="#efa836" :size="40" name="star"></u-icon>
					<view v-if="collectStatus == '0'" class="text u-line-1">收藏</view>
					<view v-if="collectStatus == '1'" style="color:#efa836;" class="text u-line-1">收藏</view>
				</view>
				<view class="item car" @click="juBao">
					<u-icon name="info-circle" :size="40"></u-icon>
					<view class="text u-line-1">举报</view>
				</view>
			</view>
			<view class="btn" @click="want">我想要</view>
		</view>
	</view>

</template>

<script setup>
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		reactive,
		ref
	} from "vue";
	import { collectApi, hasCollectApi } from "../../api/order.js";
	//举报事件
	const juBao = ()=>{
		uni.navigateTo({
			url:"../juBao/juBao"
		})
	}
	//轮播图高度
	const height = ref('600')
	//是否显示面板指示点
	const indicatorDots = ref(true)
	//是否自动播放
	const autoplay = ref(false)
	//自动切换时间间隔
	const interval = ref(4500)
	//滑动动画时长
	const duration = ref(500)
	//轮播图图片
	const swipperList = ref([])
	//商品id
	const goodsId = ref('')
	//商品分数
	const point = ref('')
	//商品点击量
	const looks = ref('')
	//商品咨询量
	const ask = ref('')
	//价格
	const Price = ref('')
	//简介
	const introduce = ref('')
	const wxNum = ref('')
	//获取联系方式
	const want = () => {
		//ask.value++,
		wx.showModal({
			title: '联系方式',
			confirmText: '复制文本',
			content: wxNum.value,
			success(res) {
				if (res.confirm) {
					wx.setClipboardData({
						data: wxNum.value,
						success(res){
							wx.getClipboardData({
								success(res){
									console.log(res.data)
								}
							})
						}
					})
				}
			}
		})
	}
	//收藏
	const collectBtn = async()=>{
		let res = await collectApi({
			userId:uni.getStorageSync("userId"),
			goodsId:goodsId.value,
		})
		if(res && res.code == 200){
			//查询是否收藏
			hasCollect()
		}
	}
	//查询是否收藏
	const hasCollect =async()=>{
		let res = await hasCollectApi({
			userId:uni.getStorageSync("userId"),
			goodsId:goodsId.value,
		})
		if(res && res.code == 200){
			collectStatus.value = res.data
		}
	}
	const collectStatus = ref('0')
	onLoad((options) => {
		const goods = JSON.parse(options.goods)
		point.value = goods.point
		goodsId.value = goods.goodsId
		introduce.value = goods.introduce
		Price.value = goods.price
		wxNum.value = goods.wxId
		looks.value = goods.looks
		ask.value  = goods.ask
		swipperList.value = goods.image.split(",")
		//查询是否收藏
		hasCollect()
	})
</script>

<style>
	.up{
		display: flex;
		align-items: center;
	}
	.looks{
	font-size: 30rpx;
	font-weight: 600;
	margin-left:130px ;
	margin-top: 13px;
	}
	.background {
		background-color: #f5eedb;
		height: 350px;
	}

	.title {
		color: #303133;
		padding-left: 35rpx;
		padding-top: 10rpx;
		font-size: 50rpx;
		font-weight: 700;
	}

	.price {
		color: #d53b33;
		padding-left: 30rpx;
		padding-top: 30rpx;
		font-size: 60rpx;
		font-weight: 700;
	}

	.info {
		display: flex;
		align-items: center;
		margin-bottom: 25px;
		padding: 0px 15px;
	}

	.introduce {
		color: #303133;
		font-weight: bold;
		padding: 10rpx;
		font-size: 40rpx;

	}

	.box1 {
		width: 55px;
		height: 4px;
		background-color: #8cbfb0;
	}

	.box2 {
		width: 55px;
		height: 4px;
		background-color: #efa836;
	}

	.box3 {
		width: 55px;
		height: 4px;
		background-color: #9c2c26;
	}

	.down_box {
		width: 100%;
		height: 47px;
		background-color: #1d1d1d;
		padding-left: 13px;
		display: flex;
		align-items: center;
	}

	.navigation {
		height: 55px;
		display: flex;
		align-items: center;
		margin-top: 100rpx;
		background-color: #f5eedb;
		padding: 0 10px;
		position: fixed;
		width: 100%;
		bottom: 0;
	}

	.left {
		display: flex;
		font-size: 20rpx;
	}

	.item {
		margin: 0 24rpx;
	}

	.car {
		text-align: center;
		position: relative;
	}

	.car-num {
		position: absolute;
		top: -10rpx;
		right: -10rpx;
	}

	.btn {
		width: 270px;
		height: 80rpx;
		text-align: center;
		padding: 10px 30rpx;
		border-radius: 20px;
		color: #000000;
		font-weight: 550;
		background-color: #f06733;
	}
</style>